<template>
  <div style="width: 100%;">
    <el-row style="margin: 10px 20px 10px 10px;" v-if="showswitch==true">
      <el-switch v-model="switchvalue" :active-text="textall" :inactive-text="textclid" @change="change_switchvalue"></el-switch>
    </el-row>
    <div class="main">
      <div id="bingtu" style="width:100%; height:400px;">
        <div id="bingtu" style="width:100%; float: left;">
          <ve-histogram :data="chartData" :extend="extend"></ve-histogram>
        </div>
        
      </div>
      <div id="main" style="width:100%; height:400px;">
        <div id="bingtu" style="width:50%; float: left;">
          <ve-pie :data="chartData2"></ve-pie>
        </div>
        <div id="bingtu" style="width:50%; float: left;">
          <ve-pie :data="chartData3"></ve-pie>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapActions} from 'vuex';
  export default {
    name: "sjtj_person",
    data() {
      return {
        showswitch:false,
        switchvalue:true,
        textall:'全局党委',
        textclid:'下级党委',
        extend : {'xAxis.0.axisLabel.rotate': 35},
        chartData: {
          columns: ['单位名', '积极分子', '重点对象', '预备党员', '党员人数'],
          columnindex:[0,1,2,3,4],
          rows: []
        },
        chartData2: {
          columns: ['性别', '数量'],
          rows: []
        },
        chartData3: {
          columns: ['在职状态', '数量'],
          rows: []
        },


        childs:[],
        datas:[],

      };
    },
    mounted() {
      if(this.$store.state.Dw_DzbID.dwid==-1){
        this.showswitch=true;this.textall='全局党委';this.textclid='下级党委'
      }
      else if(this.$store.state.Dw_DzbID.dzbid==-1){
        this.showswitch=true;this.textall='院及党委';this.textclid='下级党支部'
      }
      else{
        this.showswitch=false;
      }
      this.Getdata();
    },
    methods: {
      ...mapActions([ 'GetZbById','Getzbdetails']),
      GetZbByIdFunc() {
        let _this = this;
        this.GetZbById()
        .then((e) =>{
          if (typeof e === "object") {
            if(Array.isArray(e.childs)){
              this.childs = e.childs;
            }
          }
        });
      },
      change_switchvalue(){
        this.Getdata();
      },
      Getdata() {
        this.chartData.rows=[];
        this.chartData2.rows=[];  
        this.chartData3.rows=[];
        this.datas=[];
        if(this.showswitch==true){
          this.GetZbByIdFunc();
          if(this.switchvalue==true){  //只获取该党委的数据
            this.getdetails()
            .then((e) =>{
              this.datas.push(e)
            });
          }
          else{  //获取下级党支部的数据
            if(Array.isArray(this.childs)){
              let ps=[];
              for (let index = 0; index < this.childs.length; index++) {
                const element = this.childs[index];
                ps.push(this.getdetails({
                  dwid:element.dwid,
                  dzbid:element.dzbid,
                }))
              }
              Promise.all(ps)
              .then((e) =>{
                this.datas=e;
              });
            }
            console.log(this.childs);
          }
        }
        else  //获取当前党支部的数据
        {
          this.getdetails()
          .then((e) =>{
            this.datas.push(e)
          });
        }
      },
      getdetails(data){
        let _this = this;
        return new Promise(function (resolve, reject) {
          _this.Getzbdetails(data)
          .then((e) =>{
            resolve(e)
          })
          .catch(function(reason) {
            reject(false)
          });
        });
      },
      dodetails(){
        if(this.datas.length>0){
          console.log('do it');
          let dymanperson=0;let dywomanperson=0;let dyzzperson=0;let dytxperson=0;
          for (let index = 0; index < this.datas.length; index++) {
            const element = this.datas[index];
              let row={};
              row[this.chartData.columns[0]]=element.alias;
              row[this.chartData.columns[1]]=element.fdyjj;
              row[this.chartData.columns[2]]=element.fdyzzdx;
              row[this.chartData.columns[3]]=element.fdyyb;
              row[this.chartData.columns[4]]=element.alldypersons;
              this.chartData.rows.push(row);
              dymanperson=dymanperson+element.dymanperson
              dywomanperson=dywomanperson+element.dywomanperson
              dyzzperson=dyzzperson+element.dyzzperson
              dytxperson=dytxperson+element.dytxperson

              
          }
          this.chartData2.rows.push({
            '性别':'男性党员',
            '数量':dymanperson
          });
          this.chartData2.rows.push({
            '性别':'女性党员',
            '数量':dywomanperson
          });
          //
          this.chartData3.rows.push({
            '在职状态':'在职',
            '数量':dyzzperson
          });
          this.chartData3.rows.push({
            '在职状态':'离退休',
            '数量':dytxperson
          });
        }
      }
    },
    watch: {
      "datas":{
        handler(newValue, oldValue){
          this.dodetails();
        },
        deep:true
      }
    },
  };
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .info {
    width: 99%;

    height: 300px;

    border-radius: 5px;
  }

  .condition {
    width: 100%;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    background-color: #c54343;
    line-height: 30px;
    color: #ffffff;
  }

  .span_Introduction {
    margin-top: 10px;
  }

  .main {
    width: calc(100% - 230px);
    height: auto;
    float: left;
    border: 0px solid #c54343;
  }
</style>